<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: auto;
            margin-top: 20px;
        }
        div.deskTop {
            background: white;
            background-image: linear-gradient(90deg,
            rgba(200,0,0,.5) 50%, transparent 0),
            linear-gradient(
                    rgba(200,0,0,.5) 50%, transparent 0); background-size: 20px 20px;
        }
        div.blueDesk {
            background: #58a; background-image:
                linear-gradient(white 2px, transparent 0),
                linear-gradient(90deg, white 2px, transparent 0),
                linear-gradient(hsla(0,0%,100%,.3) 1px,
                transparent 0),
                linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,
                transparent 0);
            background-size: 75px 75px, 75px 75px,
            15px 15px, 15px 15px;
        }
        div.demo {
            background: rgba(200, 0, 0, .75);
        }
        div.polka {
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0),
            radial-gradient(tan 30%, transparent 0); background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
        }
        div.chess {
            background: #eee;
            background-image:
                    linear-gradient(45deg,
                    rgba(0,0,0,.25) 25%, transparent 0,
                    transparent 75%, rgba(0,0,0,.25) 0),
                    linear-gradient(45deg,
                    rgba(0,0,0,.25) 25%, transparent 0,
                    transparent 75%, rgba(0,0,0,.25) 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
<div class="deskTop">

</div>
<div class="blueDesk">

</div>
<div class="demo"></div>
<div class="polka">

</div>
<div class="chess"></div>
</body>
</html>